<script lang="ts" setup>
import { ref } from "vue"
import { useSettingStore } from "@/store"
import { IMoon, ISun, ISetting, ILogout, IHistory } from "@cop/Icons"
import { NDrawer, NDrawerContent, NDivider, NColorPicker, useDialog } from "naive-ui"
import { isHistoryMode } from "@/hooks/useHistoryMode"

import { getToken } from "@/util/auth"
import color from "@/config/color"
import search from "./search.vue"
const settingStore = useSettingStore()
// const userStore = useUserStore()
const settingIsShow = ref<boolean>(false)
const dialog = useDialog()

const changeTheme = (event: MouseEvent) => {
  const x = event.clientX
  const y = event.clientY
  const endRadius = Math.hypot(Math.max(x, innerWidth - x), Math.max(y, innerHeight - y))
  const transition = document.startViewTransition(async () => {
    if (settingStore.theme == "light") {
      settingStore.setTheme("dark")
    } else {
      settingStore.setTheme("light")
    }
  })

  transition.ready.then(() => {
    const clipPath = [`circle(0px at ${x}px ${y}px)`, `circle(${endRadius}px at ${x}px ${y}px)`]

    document.documentElement.animate(
      {
        clipPath: settingStore.theme == "dark" ? [...clipPath].reverse() : clipPath,
      },
      {
        duration: 600,
        easing: "ease-in-out",
        pseudoElement:
          settingStore.theme == "dark"
            ? "::view-transition-old(root)"
            : "::view-transition-new(root)",
      }
    )
  })
}

const changeThemeColor = (value: string) => {
  settingStore.setThemeColor(value)
}

// const logout = () => {
//   dialog.warning({
//     title: "退出登录",
//     content: "你确定退出登录？",
//     positiveText: "确定",
//     negativeText: "取消",
//     onPositiveClick: () => {
//       userStore.logout()
//     },
//   })
// }
</script>

<template>
  <header>
    <search />
    <!-- <span class="title">蝣</span> -->
    <nav class="setting">
      <i-history size="28" color="var(--icon-color)" @click="isHistoryMode = true" />
      <component
        :is="settingStore.theme == 'light' ? IMoon : ISun"
        size="22"
        color="var(--icon-color)"
        @click="changeTheme($event)"
      />
      <i-setting size="22" color="var(--icon-color)" @click="settingIsShow = true" />
      <!-- <ILogout size="22" color="var(--icon-color)" @click="logout" v-if="userStore.token" /> -->
    </nav>
  </header>
  <n-drawer v-model:show="settingIsShow" :width="300">
    <n-drawer-content closable>
      <template #header>
        <div class="settingHeader">项目设置</div>
      </template>
      <template #default>
        <n-divider title-placement="center">主题色设置</n-divider>
        <n-color-picker
          :show-preview="true"
          placement="bottom"
          :swatches="color"
          :default-value="settingStore.themeColor"
          @update:value="changeThemeColor"
        />
      </template>
    </n-drawer-content>
  </n-drawer>
</template>

<style lang="scss" scoped>
header {
  height: 100%;
  width: 100%;
  background: var(--bodyBg);
  transition: all 0.3s var(--n-bezier);
  display: flex;
  align-items: center;
  // justify-content: center;
  box-sizing: border-box;
  position: relative;
  // box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
  // box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  .title {
    font-size: 20px;
    color: var(--TextColor);
    transition: all 0.3s var(--n-bezier);
  }

  .setting {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 20px;
    position: absolute;
    top: 50%;
    right: 20px;
  }
}
</style>
